<template>
  <div>
    <Modal
      v-model="imageInfoMo"
      draggable
      scrollable
      title="详情"
      width="1000"
      footer-hide
    >
      <p slot="header" class="modalHeader">
        <!-- <img src="@/assets/icons/shanchu.svg" alt /> -->
        <span style="margin-left: 5px">详情</span>
      </p>
      <CButtonClose slot="close" @click="closeModalOfImageInfo" />
      <div class="modalBody" style="display: flex">
        <Card style="width: 40%">
          <Table
            border
            ref="selection4"
            :columns="getColumn"
            :data="infoTableList"
          ></Table>
        </Card>
        <Card style="width: 60%;" >
          <div>
            <!-- @/assets/icons/thumb-GF.jpg -->
            <img :src="imgUrl" alt="" width="100%"   style="margin-top:48px"/>
          </div>
        </Card>
      </div>
      <!-- <template #footer class="footerBtns" style="display:none"> </template> -->
    </Modal>
  </div>
</template>
<script>
export default {
  name: "imageInfo",
  props: ["paramData", "modalShow"],
  data() {
    return {
      imageInfoMo: false,

      imgUrl: "",
      modalStyle: { top: "340px" },
      paramParam: {},

      getColumn: [
        {
          key: "label",
          title: "参数名称",
          align: "center",
          minWidth: 80,
          maxWidth: "auto",
        },

        {
          key: "value",
          title: "参数值",
          align: "center",

          minWidth: 80,
          maxWidth: "auto",
        },
      ],
      infoTableList: [],
      optimInfoTableList: [
        { label: "拍摄时间", value: "", alias: "image_shoot_time" },
        { label: "质检结果", value: "", alias: "quality_inspection_result" },
        { label: "产品类型", value: "", alias: "product_level" },
        { label: "坐标系", value: "", alias: "crs" },

        { label: "传感器", value: "", alias: "sensor_type" },
        // { label: "空间分辨率", value: "", alias: "imagegsd" },
        // { label: "分辨率开始值", value: "", alias: "image_gsd_from" },
        // { label: "分辨率结束值", value: "", alias: "image_gsd_to" },

        
        // { label: "影像拍摄时间 ", value: "", alias: "image_shoot_time_from" },
        // { label: "影像结束时间 ", value: "", alias: "image_shoot_time_to" },

        // { label: "标签", value: "", alias: "labels" },
        // { label: "数据单位", value: "", alias: "dataunit" },
        // { label: "数据大小", value: "", alias: "datasize" },
        // { label: "数据格式", value: "", alias: "image_format" },
        // { label: "处理算法", value: "", alias: "produce_alg" },
        { label: "生产部门", value: "", alias: "produce_department" },
        { label: "生产人员", value: "", alias: "produce_person" },
        { label: "生产时间", value: "", alias: "produce_time" },
        { label: "生产流程", value: "", alias: "produce_workflow" },
        { label: "产品等级", value: "", alias: "product_level" },
        { label: "卫星类型", value: "", alias: "sat_type" },
       { label: "处理算法", value: "", alias: "produce_alg" },
        { label: "传感器类型", value: "", alias: "sensor_type" },

        // { label: "数据接收时间", value: "", alias: "receivetime" },
        // { label: "数据名称", value: "", alias: "dataname" },

        // { label: "图像左上角经度", value: "", alias: "dataupperleftlong" },
        // { label: "图像左上角纬度", value: "", alias: "topleftlatitude" },
        // { label: "图像左下角经度", value: "", alias: "datalowerleftlong" },
        // { label: "图像左下角纬度", value: "", alias: "datalowerleftlat" },

        // { label: "图像右上角经度", value: "", alias: "dataupperrightlong" },
        // { label: "图像右上角纬度", value: "", alias: "dataupperrightlat" },
        // { label: "图像右下角经度", value: "", alias: "bottomrightlongitude" },
        // { label: "图像右下角纬度", value: "", alias: "datalowerrightlat" },

        { label: "卫星名称", value: "", alias: "sat_type" },
        { label: "云量", value: "", alias: "cloud_cover" },
        { label: "影像范围", value: "", alias: "image_range" },
        // { label: "景序列号", alias: "sceneid" },
        // { label: "产品生产日期", alias: "producetime" },
        // { label: "作业员", alias: "" }, //producer

        // { label: "轨道编号", value: "", alias: "orbitid" },

        // { label: "检测云量", value: "", alias: "detectcloudpercent" },
        // { label: "空间参考", value: "", alias: "spatialreference" },

        // { label: "输入日期", value: "", alias: "importdate" },

        // { label: "影像像素高度(px)", value: "", alias: "heightinpixels" },
        // { label: "影像像素宽度(px)", value: "", alias: "widthinpixels" },

        // { label: "数据类型", value: "", alias: "datatypename" },
        // { label: "元数据路径", value: "", alias: "srcdatapath" },

        // { label: "地图投影", value: "", alias: "mapprojection" },
        // { label: "空间参考", value: "", alias: "earthellipsoid" },//高分5
        // { label: "投影信息", value: "", alias: "projectioninformation" },//高分5
      ],
      qcInfoTableList: [
        { label: "数据名称", value: "", alias: "dataname" },
        { label: "卫星名称", value: "", alias: "satelliteid" },
        { label: "传感器", value: "", alias: "sensorid" },
        { label: "轨道编号", value: "", alias: "orbitid" },
        { label: "空间分辨率", value: "", alias: "imagegsd" },
        { label: "云量", value: "", alias: "cloudpercent" },
        { label: "检测云量", value: "", alias: "detectcloudpercent" },
        { label: "接收时间", value: "", alias: "receivetime" },
        { label: "空间参考", value: "", alias: "spatialreference" },
        { label: "产品级别", value: "", alias: "productlevel" },

        { label: "生产人员", value: "", alias: "operatorname" },
        { label: "生产单位", value: "", alias: "productionunit" },
        // { label: "产品名称", value: "", alias: "productname" },
        { label: "生产时间", value: "", alias: "producetime" },

        { label: "质检人员", value: "", alias: "qcname" },
        { label: "质检部门", value: "", alias: "qcdepart" },
        { label: "质检等级", value: "", alias: "qclevel" },
        { label: "质检时间", value: "", alias: "qctime" },

        // { label: "数据单位", value: "", alias: "dataunit" },
        // { label: "数据大小", value: "", alias: "datasize" },
        // { label: "输入日期", value: "", alias: "importdate" },

        // { label: "影像像素高度(px)", value: "", alias: "heightinpixels" },
        // { label: "影像像素宽度(px)", value: "", alias: "widthinpixels" },

        // { label: "数据ID", value: "", alias: "dataid" },
        // { label: "数据类型", value: "", alias: "datatypename" },
        // { label: "元数据路径", value: "", alias: "srcdatapath" },

        // { label: "地图投影", value: "", alias: "mapprojection" },
        // { label: "空间参考", value: "", alias: "earthellipsoid" },//高分5
        // { label: "投影信息", value: "", alias: "projectioninformation" },//高分5
      ],
    };
  },
  mounted() {},
  watch: {
    paramData: {
      handler(newval, oldVal) {

        this.$nextTick(() => {   
          let data = Object.keys(newval);
          if (data.length <1  ) return;
          if (newval.flag === "optimization") {
            
            this.infoTableList = this.optimInfoTableList;
          } else {
            this.infoTableList = this.qcInfoTableList;
          }
          this.getTableList(newval.data);
        });
      },
      deep: true,
      immediate: true,
    },

  },
  methods: {

    open() {
      this.imageInfoMo=!this.imageInfoMo

    },
    getTableList(data) {
      // level 目前只查为2的 0是图标
      this.imgUrl =
        this.$api.dataOptimizationApi.getLevelImageFile +     "?path=" +
                data.thumbnail_path;
        // "?dataId=" +
        // data["dataid"] +
        // "&level=" +
        // 10;
      this.infoTableList.forEach((ele) => {
     if(ele.alias == "quality_inspection_result"){
       if(data[ele.alias]=="unchecked"){
           ele.value = "未检查"
       }else if(data[ele.alias]=="unqualified"){
          ele.value  = "不合格"
       }else if(data[ele.alias]=="qualified"){
         ele.value ="合格"
       }
     }else{
          ele.value = data[ele.alias];
     }
      });
    },
    closeModalOfImageInfo() {
      this.$emit("closed");
    },
  },
};
</script>
<style scoped>
/deep/.ivu-table-body {
  height: calc(100vh - 400px);
  overflow-y: auto;
}
</style>